<template>
  <view class="play-container" :style="'background:url('+ songs.picUrl +');'">
    <commonHead :title='songs.name' isShow="true" titlecolor='#FFFFFF'></commonHead>
    <scroll-view scroll-y="true">
      <!-- 歌曲播放部分 -->
      <view class="paly-botton">
        <view class="icon-text">
          <text class="iconfont icon-vynil"></text>
          <text>网易云音乐</text>
        </view>
        <view class="out-circle">
          <view class="center-circle horizontal-vertical">
            <view class="in-circle horizontal-vertical">
              <view class="control-botton horizontal-vertical" @tap="playTstop">
                <text class="iconfont icon-bofang1" v-if="unActive"></text>
                <text class="iconfont icon-zanting" v-else></text>
                <!-- <audio :src="songs.playUrl" controls @ended="playTstop"></audio> -->
              </view>
              <image :src="songs.picUrl" :class="unActive?'':'image-animation'"></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 歌词区域 -->
      <view class="lyrics-area">
        <view class="song">
          <text v-for="(item,index) in GetLyric" :key="index" >{{item.lyric}}</text>
        </view>
        <navigator url="">在网易云音乐查看更多歌词</navigator>
        <view class="share-song">
          分享给微信朋友
        </view>
      </view>
      <!-- 其他音乐 -->
      <view class="other">
        <view class="other-song">
          <text>相似歌曲</text>
          <view class="all-listen">
            <text class="iconfont icon-bofang"></text>
            <text>一键收听</text>
          </view>
        </view>
        <palyOtherItem namecolor='#FFFFFF' iconcolor='rgba(256,256,256,0.6)' :otherMusic = "simiSongs"></palyOtherItem>
      </view>
      <!-- 精彩评论 -->
      <view class="comment">
        <text class="comment-title">精彩评论</text>
        <view class="comment-item" v-for="(item,index) in songsComment" :key="index">
          <!-- 基本信息 -->
          <view class="item-base-info">
            <image :src="item.user.avatarUrl"></image>
            <view class="info-name">
              <text class="name" style="font-size: 28rpx;">{{item.user.nickname}}</text>
              <text class="time" style="font-size: 20rpx;">{{item.time | timer}}</text>
            </view>
            <view class="like">
              <text class="like-num" style="font-style: 32rpx;">{{item.likedCount}}</text>
              <text class="iconfont icon-dianzan"></text>
            </view>
          </view>
          <!-- 评论内容 -->
          <view class="content">
            {{item.content}}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import commonHead from '../../components/common-head/common-head.vue'
  import palyOtherItem from '../../components/play-other-item/play-other-item.vue'
  import request from '../../common/request.js'
  export default {
    components:{commonHead,palyOtherItem},
    data() {
      return {
        unActive:true,
        songs:{
          name:'',
          picUrl:'',
          playUrl:'',
          lyric:''
        },
        // 评论列表
        songsComment:[],
        // 相似歌曲
        simiSongs:[],

      }
    },
    onLoad(option){
      request(`/song/detail?ids=${option.id}`).then((res)=>{
        let {name,al} = res.data.songs[0];
        this.songs.name = name;
        this.songs.picUrl = al.picUrl;
      });
      this.getPlayUrl(option.id);
      // 获取歌词
      request(`/lyric?id=${option.id}`).then(res=>{
        this.songs.lyric  = res.data.lrc.lyric;
        // console.log(this.songs.lyric)
      });
      // 获取歌曲评论
      request(`/comment/hot?id=${option.id}&type=0`).then(res=>{
        // console.log(res)
        this.songsComment = res.data.hotComments;
      });
      // 获取相似歌曲
      request(`/simi/song?id=${option.id}`).then(res=>{
        this.simiSongs = res.data.songs;
        // console.log(this.simiSongs)
      });
      // 创建Audio上下文
      this.musicPlay = uni.createInnerAudioContext({});
    },
    onShow(){
      const that =this;
      this.musicPlay.onEnded(function(){
        that.unActive = !that.unActive;
      })
    },
    methods: {
      // 播放暂停切换
      playTstop(){
        this.unActive = !this.unActive;
        if(this.musicPlay.paused){
          this.musicPlay.play();
        }else{
          this.musicPlay.pause();
        }
      },
      
      // 获取歌曲播放地址
      async getPlayUrl(id){
        const {data} =  await request(`/song/url?id=${id}`);
        this.songs.playUrl = data.data[0].url;
        this.musicPlay.src = this.songs.playUrl;
      }
    },
    computed:{
      GetLyric(){
        // 将歌词进行key value的形式
        let temp = this.songs.lyric.split('\n');
        let result = [];
        temp.forEach(item=>{
          let temparr = item.split(']');
          let obj = {};
          let key = temparr[0].slice(1,temparr[0].length);
          let times = key.split(':');
          let time = (times[0]*60 + (times[1]-0)).toFixed(3);
          obj.time = time;
          obj.lyric = temparr[1];
          result.push(obj);
        })
        return result;
      }
    }
  }
</script>

<style scoped>
  .play-container{
    position: relative;
  }
  .play-container::before{
    content: "";
    display: block;
    position: absolute;
    backdrop-filter: blur(8px);
    background-color: rgba(0,0,0,0.6);
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .play-container scroll-view{
    height: calc(100vh - 75px);
    box-sizing: border-box;
    padding: 20rpx;
  }
  /* 歌曲播放部分 */
  .paly-botton{
    position: relative;
    width: 100%;
    height: 810rpx;
  }
  
  .paly-botton .icon-text{
    /* position: absolute; */
    display: flex;
    align-items: center;
  }
  .icon-text .icon-vynil{
    font-size: 38rpx;
    color: #DD524D;
    margin-right: 10rpx;
  }
  .icon-text text:last-child{
    font-size: 28rpx;
    color: #FFFFFF;
  }
  
  /* 绘制圆环 */
  .out-circle{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 44rpx;
    width: 578rpx;
    height: 578rpx;
    border-radius: 50%;
    background-color: red;
  }
  
  .center-circle{
    width: 562rpx;
    height: 562rpx;
    background-color: black;
  }
  .in-circle{
    width: 368rpx;
    height: 368rpx;
  }
  /* 实现水平垂直 */
  .horizontal-vertical{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
  }
  /* 内圈样式*/
  .in-circle image{
    width: 368rpx;
    height: 368rpx;
    border-radius: 50% ;
  }
  
  /* 动态显示动画 */
  .image-animation{
    animation: rotateAnimation 5s linear infinite;
  }
  .in-circle .control-botton{
    z-index: 1005;
  }
  .icon-bofang1,.icon-zanting{
    font-size: 160rpx;
    color: #FFFFFF;
  }
  

  
  
  /* 歌词部分 */
  .lyrics-area{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .lyrics-area .song{
    width: 100%;
    height: 274rpx;
    text-align: center;
    overflow-y: auto;
    color: rgba(256,256,256,0.6);
  }
  .lyrics-area .song text{
    display: block;
    margin: 10px 0;
  }
  .lyrics-area navigator{
    font-size: 32rpx;
    color: #FFFFFF;
    text-decoration:underline;
    margin: 40rpx 0;
  }
  .lyrics-area .share-song{
    width: 332rpx;
    height: 70rpx;
    border-radius: 36rpx;
    border: 1px solid #FFFFFF;
    text-align: center;
    line-height: 70rpx;
    color: #FFFFFF;
    margin-top: 50rpx;
    margin-bottom: 66rpx;
  }
  /* 滚动歌词正在播放的那一句 */
  .isPlay{
    color: #FFFFFF;
    font-size: 36rpx;
  }
  .other .other-song{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
  }
  .other-song .all-listen{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 176rpx;
    height: 56rpx;
    border-radius: 28rpx;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 26rpx;
  }
  
  /* 评论区内容 */
  .comment{
    margin: 46rpx 0;
  }
  .comment .comment-title{
    font-size: 30rpx;
    color: #FFFFFF;
    font-size: 32rpx;
  }
  .comment-item .item-base-info{
    display: flex;
    align-items: center;
    height: 66rpx;
    width: 100%;
    color: rgba(256,256,256,0.6);
    margin-top: 46rpx;
  }
  .item-base-info image{
    width: 66rpx;
    height: 66rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .item-base-info .info-name{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .icon-dianzan{
    font-size: 44rpx;
    margin-left: 10rpx;
  }
  /* 评论内容 */
  .comment-item .content{
    box-sizing: border-box;
    width: calc(100vw - 104rpx);
    margin-left: 66rpx;
    padding: 20rpx;
    padding-bottom: 40rpx;
    border-bottom: 1px solid rgba(256,256,256,0.1);
    color: #FFFFFF;
  }
  
  
  
  /* 动画 */
  @keyframes rotateAnimation{
    from{
      transform: rotate(0);
    }
    to{
      transform: rotate(360deg);
    }
  }
</style>